import React from 'react'
import { Modal, Button, Form, Input, Row, Col } from 'antd'
import LwjTable from 'components/LwjTable/LwjTable'

const FormItem = Form.Item
const UserRoles = ({dataSource, dispatch, roleIds, userId, showBindRolesModal}) => {
  const columns = [
    {
      title: '角色编码',
      dataIndex: 'name',
      key: 'name',
      width: 150
    }, {
      title: '角色名称',
      dataIndex: 'description',
      key: 'description',
      width: 150
    },
  ]
  let roleItems = dataSource.filter(item => {
    switch (item.name) {
      case 'ROLE_USER' :
        return false
      case 'ROLE_ADMIN' :
        return false
      case 'ROLE_ANONYMOUS' :
        return false
      default:
        return true
    }
  })
  const modalProps = {
    visible: showBindRolesModal,
    destroyOnClose: true,
    title: '绑定角色',
    onCancel: () => {
      dispatch({
        type: 'user/showUserRolesModal',
        payload: false
      })
    },
    onOk: () => {
      /** @namespace currentItem.organizationId */
      dispatch({
        type: 'user/onBindRoles',
        payload: {
          userId: userId,
          roleIds: roleIds,
        }
      })
    }
  }

  const listProps = {
    dataSource: roleItems,
    pagination: false,
    pageChangeAction: 'role/query',
    dispatch,
    selectType: 'multiple',
    selectedRowKeys: roleIds,
    onSelectRows: (selectedRowKeys) => {
      dispatch({
        type: 'user/bindSelectedIds',
        payload: {
          roleIds: selectedRowKeys
        }
      })
    }
  }

  return (
    <div>
      <Modal {...modalProps}>
        <LwjTable
          {...listProps}
          columns={columns}/>
      </Modal>
    </div>
  )
}

export default UserRoles
